<template>
    <div class="swiperKind">
        <van-swipe >
            <van-swipe-item>
                <van-grid square :border="false">
                    <van-grid-item v-for="(item,index) in lists1" :key="index" :icon="url+item.image_url" :text="item.title" @click="kindAction(item.title)">
                    </van-grid-item>
                </van-grid>
            </van-swipe-item>
            
            <van-swipe-item>
                <van-grid square :border="false">
                    <van-grid-item v-for="(item,index) in lists2" :key="index" :icon="url+item.image_url" :text="item.title" @click="kindAction(item.title)">
                    </van-grid-item>
                </van-grid>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
// // 引入宫格组件
// import { Grid, GridItem } from 'vant';
// // 引入轮播组件
// import { Swipe, SwipeItem } from 'vant';
export default {
    components:{
    },
    data:function() {
        return {
            lists:[],
            lists1:[],
            lists2:[],
            url:"https://fuss10.elemecdn.com/"
        }
    },
     methods: {
        
        kindAction(title){
            localStorage.setItem('title',JSON.stringify(title))
            this.$router.push({name:"BusinessKind"})
            console.log(title)
        }
    },
    created() {
    this.$axios.get('/api/v2/index_entry',{

    }).then(res=>{
    //   console.log(res)
      this.lists = res.data;
      this.lists1=this.lists.slice(0,8);
      this.lists2=this.lists.slice(8,16);
    //   console.log(this.lists1)
    //   console.log(this.lists2)

    }).catch(err=>console.log(err));
  },
}
</script>
<style lang="less">
    .swiperKind{
        border-bottom: 1px solid #dddddd;
        .van-icon__image{
            width: 45px;
            height: 45px;
        }
        .van-grid-item__text{
            font-size: 13px;
        }
        .van-swipe__indicator{
            width: 7px;
            height: 7px;
            opacity: 1;
        }
        .van-swipe__indicators{
            bottom: .1rem;
        }
        .van-toast{
           display: block;
        }
    }
    
</style>